<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 封装简易axios的方法 
1.第一步使用axios函数 
2.发起xhr请求
3.返回promise对象的结果
4.调用axios函数
5.输出结果-->
<!-- 
    查询功能 params
 -->
<body>
    <p class="my-p"></p>
    <script>
        //定义一个myAxio函数 接受配置对象 返回promise对象
        function myAxios(config){
            return new Promise((resolve,reject)=>{
                const xhr=new  XMLHttpRequest()
                //params参数
                if(config.params){
                    //使用URLSearchParams(config.params）转换并携带到url上
                    const paramsObj=new URLSearchParams(config.params)
                    const queryString=paramsObj.toString()
                    config.url+='?${qurryString}'
                }
                //发起xhr请求,请求方法
                xhr.open(config.mehtod||'GET',config.url)
                //加载结束之后返回处理结果
                xhr.addEventListener('loadend',()=>{
                    //调用成功和失败的处理程序
                    if(xhr.status>=200&&xhr.status<=300)
                    {
                        resolve(JSON.parse(xhr.response))
                    }else{
                        reject(new Error(xhr.response))
                    }
                })
                xhr.send()
            })
        }
        //使用myAxios函数，获取省份列表
        // myAxios({
        //     url:'http://hmajax.itheima.net/api/province'
        // }).then(result=>{
        //     console.log(result)
        //     document.querySelector('.my-p').innerHTML=result.list.join('<br>')
        // }).catch(error=>{
        //     console.log(erorr)
        //     document.querySelector('.my-p').innerHTML=error.message
        // })
       

        //使用mtyaxios函数，获取地区列表
        myAxios({
            url:'http://hmajax.itheima.net/api/area',
            params:{
                pname:'广东省',
                cname:'珠海市'
            }
        }).then(result=>{
            console.log(result)
            document.querySelector('.my-p').innerHTML=result.list.join('<br>')
        }).catch(error=>{
            console.log(erorr)
            document.querySelector('.my-p').innerHTML=error.message
      })
    </script>
</body>
</html>